﻿@{
    Layout = null;
}

<style>
    .mtlr15 .nav-tabs {
        border-bottom: 0;
    }

    .firstRow {
        border-bottom: 1px solid #e4eaec;
    }

    #TempletList1, #TempletList2, #TempletList3, #TempletList4, #TempletList5, #TempletList6 {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
    }

        #TempletList1 > li, #TempletList2 > li, #TempletList3 > li, #TempletList4 > li, #TempletList5 > li, #TempletList6 > li {
            margin-left: 5%;
            margin-top: 20px;
            width: 18%;
            height: 270px;
            color: #222;
        }

            #TempletList1 > li:nth-child(1), #TempletList2 > li:nth-child(1), #TempletList3 > li:nth-child(1), #TempletList4 > li:nth-child(1), #TempletList5 > li:nth-child(1), #TempletList6 > li:nth-child(1) {
                border: 1px dashed #e5e5e5;
                text-align: center;
            }

    .QrCode {
        display: none;
    }

    li:hover .QrCode {
        display: flex;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        text-align: center;
        border-radius: 4px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .QrCode > img {
        margin-top: 20%;
    }

    .QrCode > input {
        display: block;
        margin: 0 auto;
        border: 1px solid #eee;
        background-color: rgba(0,0,0,0);
        margin-top: 10%;
        width: 50px;
        border-radius: 3px;
        color: white;
    }

    @@media only screen and (min-width: 1450px) {
        #TempletList1 > li, #TempletList2 > li, #TempletList3 > li, #TempletList4 > li, #TempletList5 > li, #TempletList6 > li {
            margin-left: 5%;
            margin-top: 20px;
            width: 18%;
            height: 330px;
            color: #222;
        }
    }

    @@media only screen and (min-width: 1750px) {
        #TempletList1 > li, #TempletList2 > li, #TempletList3 > li, #TempletList4 > li, #TempletList5 > li, #TempletList6 > li {
            margin-left: 5%;
            margin-top: 20px;
            width: 18%;
            height: 420px;
            color: #222;
        }
    }
</style>

<div class="mtlr15">
    <div class="right-con">
        <div class="tab-content" style="margin-top:15px;" id="level2-content">
            <!-----------------------------全部页面-------------------------------------->
            <div id="award1" role="tabpanel" class="tab-pane fade in active ">
                <ul id="TempletList1" class="container-fluid">
                    <li class="TempletItem" data-id="0">
                        <div style="font-size:48px;font-weight:600;margin-top:30%;">+</div>
                        <div>从空白模板创建</div>
                    </li>

                    <li class="TempletItem" data-id="1" style="background-image: url(/Content/webImgs/AntiFake/u86.png); background-repeat: no-repeat; background-size: 100% 100%; ">
                        <a href="#" class="QrCode">
                            <img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" />
                            <input type="button" name="name" value="使用" />
                        </a>
                    </li>

                    <li class="TempletItem" data-id="2" style="background-image: url(/Content/webImgs/AntiFake/u88.png); background-repeat: no-repeat; background-size: 100% 100%;">
                        <a href="#" class="QrCode">
                            <img src="~/Content/webImgs/TraceSource/ExperienceCenter/qrcode.png" />
                            <input type="button" name="name" value="使用" />
                        </a>
                    </li>
                </ul>
            </div>
            <!-----------------------------防伪页面-------------------------------------->

        </div>
    </div>

</div>


<script type="text/javascript">
    //监听div宽高变化
    (function ($, window, undefined) {
        var elems = $([]),
         jq_resize = $.resize = $.extend($.resize, {}),
         timeout_id,
         str_setTimeout = 'setTimeout',
         str_resize = 'resize',
         str_data = str_resize + '-special-event',
         str_delay = 'delay',
         str_throttle = 'throttleWindow';
        jq_resize[str_delay] = 250;
        jq_resize[str_throttle] = true;
        $.event.special[str_resize] = {
            setup: function () {
                if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                    return false;
                }
                var elem = $(this);
                elems = elems.add(elem);
                $.data(this, str_data, {
                    w: elem.width(),
                    h: elem.height()
                });
                if (elems.length === 1) {
                    loopy();
                }
            },
            teardown: function () {
                if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                    return false;
                }
                var elem = $(this);
                elems = elems.not(elem);
                elem.removeData(str_data);
                if (!elems.length) {
                    clearTimeout(timeout_id);
                }
            },
            add: function (handleObj) {
                if (!jq_resize[str_throttle] && this[str_setTimeout]) {
                    return false;
                }
                var old_handler;
                function new_handler(e, w, h) {
                    var elem = $(this),
                     data = $.data(this, str_data);
                    data.w = elem.width();
                    data.h = elem.height();
                    old_handler.apply(this, arguments);
                }
                if ($.isFunction(handleObj)) {
                    old_handler = handleObj;
                    return new_handler;
                } else {
                    old_handler = handleObj.handler;
                    handleObj.handler = new_handler;
                }
            }
        };
        function loopy() {
            timeout_id = window[str_setTimeout](function () {
                elems.each(function () {
                    var elem = $(this),
                     width = elem.width(),
                     height = elem.height(),
                     data = $.data(this, str_data);
                    if (width !== data.w || height !== data.h) {
                        elem.trigger(str_resize, [data.w = width, data.h = height]);
                    }
                });
                loopy();
            }, jq_resize[str_delay]);
        }
    })(jQuery, this);


    $('#TempletList1').resize(function () {
        $('.TempletItem').each(function () {
            $(this).height($(this).width() * 1.3);
        })
    })

    $("#TempletList1 li").click(function () {
        var TID = $(this).attr("data-id");
        $.MGJ.Common.loadurl(this, '/AntiFake/CreateAntiFakePage2?Id=' + 0 + "&TID=" + parseInt(TID));
    })

</script>